<template>
	<div class="container">
		<div class="content">
			<div>内容展示</div>
			<div v-for="i in list" :key="i.id">{{ i.value }}</div>
		</div>
		<div style="margin-top: 20px">
			<div class="hang" v-for="(item, index) in list" :key="index">
				<div>
					<el-input
						v-model="item.value"
						style="width: 200px"
						placeholder=""
						size="samll"
						clearable
					></el-input>
				</div>
				<div class="button">
					<el-button
						@click="deletes(item.id)"
						v-show="list.length != 1 && index != 0"
						>-</el-button
					><el-button @click="add">+</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Loading } from 'element-ui'
export default {
	name: 'autochange',
	data() {
		return {
			value: '',
			list: [],
			idx: 0,
		}
	},
	created() {
		if (this.list.length <= 0) {
			this.list = [{ id: 0, value: '' }]
		}
	},
	methods: {
		add() {
			this.idx = this.idx + 1
			this.list.push({ id: this.idx, value: '' })
		},
		deletes(id) {
			let idIndex = this.list.findIndex((item) => {
				return item.id == id
			})
			this.list.splice(idIndex, 1)
		},
	},
}
</script>

<style>
.container {
	width: 100%;
	height: 100%;
	background-color: #eee;
}
.content {
	height: 200px;
	overflow-y: auto;
}
.hang {
	display: flex;
  justify-content: center;
  margin-top: 10px;
}
.button {
  width: 150px;
  text-align-last: right;
}
</style>
